<template>
  <div
    class="w-140 h-140"
    border="~ solid red"
    id="editor"
    ref="editor"
    v-contextmenu.stop="contextmenus"
  ></div>
</template>

<script setup lang="ts" name="ContextMenu">
import type { ContextmenuItem } from '@/plugins/directive/contextmenu/types';
import { detectOS } from '@/utils/index';

const copy = (_: HTMLElement, event: MouseEvent) => {
  console.log('复制');
  console.log('_', _);
  console.log('event', event);
};
const paste = (_: HTMLElement, event: MouseEvent) => {
  console.log('粘贴');
  console.log('_', _);
  console.log('event', event);
};

const inspect = (_: HTMLElement, event: MouseEvent) => {
  console.log('检查');
  console.log('_', _);
  console.log('event', event);
};

const isWindow = computed(() => detectOS().toLowerCase().includes('win'));

const contextmenus: ContextmenuItem[] = [
  {
    text: '复制',
    subText: 'Ctrl + C',
    handler: copy,
  },
  {
    text: '粘贴',
    subText: 'Ctrl + V',
    handler: paste,
  },
  {
    text: '检查',
    subText: isWindow.value ? 'F12' : 'option+command+i',
    handler: inspect,
  },
];
</script>

<style scoped></style>
